import 'package:flutter/material.dart';
import '../l10n/app_localizations.dart';

class SidebarWidget extends StatelessWidget {
  final int selectedIndex;
  final bool isCollapsed;
  final Function(int) onItemSelected;
  final VoidCallback onToggleCollapse;
  final bool isSmallScreen;
  final String? currentMembership;
  final int? enabledServicesCount;
  final VoidCallback? onMembershipTap;

  const SidebarWidget({
    Key? key,
    required this.selectedIndex,
    required this.isCollapsed,
    required this.onItemSelected,
    required this.onToggleCollapse,
    required this.isSmallScreen,
    this.currentMembership,
    this.enabledServicesCount,
    this.onMembershipTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final sidebarWidth = isCollapsed ? 60.0 : 200.0;
    
    if (isSmallScreen && isCollapsed) {
      return const SizedBox.shrink();
    }
    
    return AnimatedContainer(
      duration: const Duration(milliseconds: 300),
      width: sidebarWidth,
      color: Theme.of(context).cardColor,
      child: Column(
        children: [
          // Logo 区域
          Container(
            height: isSmallScreen ? 56 : 64,
            padding: EdgeInsets.symmetric(horizontal: isSmallScreen ? 12 : 16),
            child: isCollapsed 
                ? Center(
                    child: IconButton(
                      icon: Icon(
                        Icons.menu,
                        color: Theme.of(context).textTheme.bodyLarge?.color,
                        size: isSmallScreen ? 28 : 32,
                      ),
                      onPressed: onToggleCollapse,
                    ),
                  )
                : ClipRect(
                    child: LayoutBuilder(
                      builder: (context, constraints) {
                        // 如果可用宽度极小（小于10像素），只显示一个极小图标
                        if (constraints.maxWidth < 10) {
                          return Center(
                            child: GestureDetector(
                              onTap: onToggleCollapse,
                              child: Icon(
                                Icons.menu,
                                color: Theme.of(context).textTheme.bodyMedium?.color,
                                size: 8,
                              ),
                            ),
                          );
                        }
                        
                        // 如果可用宽度太小（小于50像素），只显示一个小图标
                        if (constraints.maxWidth < 50) {
                          return Center(
                            child: GestureDetector(
                              onTap: onToggleCollapse,
                              child: Icon(
                                Icons.menu,
                                color: Theme.of(context).textTheme.bodyMedium?.color,
                                size: 16,
                              ),
                            ),
                          );
                        }
                        
                        // 如果可用宽度小于80像素，只显示菜单按钮
                        if (constraints.maxWidth < 80) {
                          return Center(
                            child: IconButton(
                              icon: Icon(
                                Icons.menu_open,
                                color: Theme.of(context).textTheme.bodyMedium?.color,
                                size: 18,
                              ),
                              onPressed: onToggleCollapse,
                              padding: EdgeInsets.all(4),
                              constraints: BoxConstraints(minWidth: 24, minHeight: 24),
                            ),
                          );
                        }
                        
                        // 如果可用宽度小于120像素，简化布局
                        if (constraints.maxWidth < 120) {
                          return Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Icon(
                                Icons.router,
                                color: Colors.blue,
                                size: 18,
                              ),
                              const SizedBox(width: 2),
                              IconButton(
                                icon: Icon(
                                  Icons.menu_open,
                                  color: Theme.of(context).textTheme.bodyMedium?.color,
                                  size: 16,
                                ),
                                onPressed: onToggleCollapse,
                                padding: EdgeInsets.all(2),
                                constraints: BoxConstraints(minWidth: 20, minHeight: 20),
                              ),
                            ],
                          );
                        }
                        
                        // 正常布局
                        return Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Icon(
                              Icons.router,
                              color: Colors.blue,
                              size: isSmallScreen ? 28 : 32,
                            ),
                            SizedBox(width: isSmallScreen ? 12 : 16),
                            Flexible(
                              child: Text(
                                AppLocalizations.of(context)!.appTitle,
                                style: TextStyle(
                                  color: Theme.of(context).textTheme.titleLarge?.color,
                                  fontSize: isSmallScreen ? 16 : 18,
                                  fontWeight: FontWeight.bold,
                                ),
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                            IconButton(
                              icon: Icon(
                                Icons.menu_open,
                                color: Theme.of(context).textTheme.bodyMedium?.color,
                                size: isSmallScreen ? 20 : 24,
                              ),
                              onPressed: onToggleCollapse,
                            ),
                          ],
                        );
                      },
                    ),
                  ),
          ),
          Divider(
            color: Theme.of(context).dividerColor,
            height: 1,
          ),
          // 导航菜单
              Expanded(
                child: ListView(
                  padding: EdgeInsets.symmetric(vertical: isSmallScreen ? 8 : 12),
                  children: [
                    _buildNavItem(context, Icons.home, AppLocalizations.of(context)!.home, 0),
                    _buildNavItem(context, Icons.settings, AppLocalizations.of(context)!.settings, 1),
                    _buildNavItem(context, Icons.person, AppLocalizations.of(context)!.myPlan, 2),
                  ],
                ),
              ),
              // 会员信息区域
              if (currentMembership != null && !isCollapsed)
                _buildMembershipInfo(context),
        ],
      ),
    );
  }

  Widget _buildNavItem(BuildContext context, IconData icon, String title, int index) {
    final isSelected = selectedIndex == index;
    return Container(
      margin: EdgeInsets.symmetric(
        horizontal: isSmallScreen ? 8 : 12,
        vertical: isSmallScreen ? 2 : 4,
      ),
      child: isCollapsed
          ? Tooltip(
              message: title,
              child: Container(
                height: isSmallScreen ? 48 : 56,
                width: isSmallScreen ? 44 : 52,
                decoration: BoxDecoration(
                  color: isSelected ? Colors.blue.withOpacity(0.1) : null,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Center(
                  child: Icon(
                    icon,
                    color: isSelected ? Colors.blue : Theme.of(context).textTheme.bodyMedium?.color,
                    size: isSmallScreen ? 20 : 24,
                  ),
                ),
              ),
            )
          : InkWell(
              onTap: () => onItemSelected(index),
              borderRadius: BorderRadius.circular(8),
              child: Container(
                height: isSmallScreen ? 48 : 56,
                padding: EdgeInsets.symmetric(
                  horizontal: isSmallScreen ? 12 : 16,
                ),
                decoration: BoxDecoration(
                  color: isSelected ? Colors.blue.withOpacity(0.1) : null,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: ClipRect(
                  child: LayoutBuilder(
                    builder: (context, constraints) {
                      // 如果可用宽度极小（小于10像素），只显示极小图标
                      if (constraints.maxWidth < 10) {
                        return Center(
                          child: Icon(
                            icon,
                            color: isSelected ? Colors.blue : Theme.of(context).textTheme.bodyMedium?.color,
                            size: 8,
                          ),
                        );
                      }
                      
                      // 如果可用宽度太小（小于50像素），只显示小图标
                      if (constraints.maxWidth < 50) {
                        return Center(
                          child: Icon(
                            icon,
                            color: isSelected ? Colors.blue : Theme.of(context).textTheme.bodyMedium?.color,
                            size: 16,
                          ),
                        );
                      }
                      
                      // 如果可用宽度小于80像素，只显示图标
                      if (constraints.maxWidth < 80) {
                        return Center(
                          child: Icon(
                            icon,
                            color: isSelected ? Colors.blue : Theme.of(context).textTheme.bodyMedium?.color,
                            size: isSmallScreen ? 18 : 20,
                          ),
                        );
                      }
                      
                      // 正常显示图标和文本
                      return Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(
                            icon,
                            color: isSelected ? Colors.blue : Theme.of(context).textTheme.bodyMedium?.color,
                            size: isSmallScreen ? 20 : 24,
                          ),
                          SizedBox(width: isSmallScreen ? 12 : 16),
                          Flexible(
                            child: Text(
                              title,
                              style: TextStyle(
                                color: isSelected ? Colors.blue : Theme.of(context).textTheme.bodyLarge?.color,
                                fontSize: isSmallScreen ? 14 : 16,
                                fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
                              ),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      );
                    },
                  ),
                ),
              ),
            ),
    );
  }

  Widget _buildMembershipInfo(BuildContext context) {
    final isSmallScreen = MediaQuery.of(context).size.width < 768;
    return Container(
      margin: EdgeInsets.all(isSmallScreen ? 8 : 12),
      padding: EdgeInsets.all(isSmallScreen ? 12 : 16),
      decoration: BoxDecoration(
        color: Theme.of(context).scaffoldBackgroundColor,
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: Colors.blue.withOpacity(0.3),
        ),
      ),
      child: InkWell(
        onTap: onMembershipTap,
        borderRadius: BorderRadius.circular(8),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: [
                Icon(
                  Icons.star,
                  color: Colors.blue,
                  size: isSmallScreen ? 16 : 18,
                ),
                SizedBox(width: isSmallScreen ? 6 : 8),
                Expanded(
                  child: Text(
                    '当前会员: $currentMembership',
                    style: TextStyle(
                      color: Theme.of(context).textTheme.bodyLarge?.color,
                      fontSize: isSmallScreen ? 12 : 14,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ],
            ),
            if (enabledServicesCount != null) ...[
              const SizedBox(height: 4),
              Text(
                '已启用服务: $enabledServicesCount 个',
                style: TextStyle(
                  color: Theme.of(context).textTheme.bodyMedium?.color,
                  fontSize: isSmallScreen ? 10 : 12,
                ),
              ),
            ],
          ],
        ),
      ),
    );
  }
}